import React from 'react';
import './styles.css';


const ProductShowcase: React.FC = () => {
  // 示例产品数据，可以替换为从 API 获取的数据
  const products = [
    { id: 1, name: 'Gold Necklace', price: '$500', image: '/images/product1.jpg' },
    { id: 2, name: 'Silver Ring', price: '$200', image: '/images/product2.jpg' },
    { id: 3, name: 'Diamond Earrings', price: '$1200', image: '/images/product3.jpg' },
  ];

  return (
    <div className="product-showcase">
      <h2>Featured Products</h2>
      <div className="product-grid">
        {products.map(product => (
          <div key={product.id} className="product-card">
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p>{product.price}</p>
            <button>Add to Cart</button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductShowcase;
